// console.log("after");
// setTimeout(() => {
//   console.log("setTimeout");
// }, 0);

// 模拟鼠标移动到指定元素上
// function simulateMouseMove(x, y) {
//   if (!simulateMouseMove.element) {
//     simulateMouseMove.element = document.getElementById("gameCanvas");
//   }
//   // 创建一个新的鼠标移动事件
//   var event = new MouseEvent("mousemove", {
//     clientX: x,
//     clientY: y,
//     screenX: x,
//     screenY: y,
//     view: window,
//   });

//   // 触发元素上的鼠标移动事件
//   simulateMouseMove.element.dispatchEvent(event);
// }

// document
//   .getElementById("gameCanvas")
//   .addEventListener("mousemove", function (e) {
//     console.log(e);
//   });
// setTimeout(() => {
//   simulateMouseMove(100, 100);
//   simulateMouseMove(100, 100);
// }, 1000);
// setTimeout(() => {
//   console.log('setTimeout')
// }, 0);
const element = document.getElementById("div1");

setTimeout(() => {
  const start1 = performance.now();
  const Rect = element.getBoundingClientRect();
  console.log("重排耗时:", performance.now() - start1);

  console.log("top", Rect.top);
  console.log("height", Rect.height);
  console.log("element.offsetHeight", element.offsetHeight);
  console.log("body-height", document.body.getBoundingClientRect().height);
  element.innerText =
    "新内容...sdfsljflsk时代峰峻时空裂缝就算了开发机索拉卡大飞机收垃圾过啦设计过立卡手机大发立卡手机发啦随机发立卡手机发啦手机打发啦手机发啦手机打发啦四级联考动静分离看手机反垃圾算啦飞机索拉卡飞机索拉卡估计双打卡反垃圾失蜡法就撒拉法基收垃圾来挂机多大搜嘎卡拉是国际上拉法基拉萨";
  // 强制同步布局计算

  const start2 = performance.now();
  const Rect1 = element.getBoundingClientRect();
  console.log("重排耗时:", performance.now() - start2);
  console.log("top", Rect1.top);
  console.log("height", Rect1.height);
  console.log("element.offsetHeight", element.offsetHeight);
  console.log("body-height", document.body.getBoundingClientRect().height);
}, 0);

// })
// requestAnimationFrame(() => {
//   // 这里可以获取到新宽度，因为：
//   // 1. 上一帧的DOM修改已提交
//   // 2. 浏览器尚未进行新帧的样式计算

//   const height = getComputedStyle(element).height;
//   console.log(height); // 500px
// });

// Promise.resolve().then(() => {
//   console.log("微任务");
// });
// const targetDiv = document.getElementById("div1");
// // 创建一个MutationObserver实例
// const observer = new MutationObserver((mutationsList) => {
//   // 在这里可以执行在页面绘制前需要做的事情
//   console.log("DOM发生了变化，即将进行页面绘制...");
//   // 可以对变化进行具体的处理
//   for (let mutation of mutationsList) {
//     if (mutation.type === "attributes") {
//       console.log(`属性 ${mutation.attributeName} 发生了变化`);
//     } else if (mutation.type === "childList") {
//       console.log("子节点发生了变化");
//     }
//   }
// });
// 配置观察选项
// const config = { attributes: true, childList: true, subtree: true };
// // 开始观察目标元素
// observer.observe(targetDiv, config);
// // 模拟触发DOM变化
// targetDiv.style.color = "red";
// targetDiv.innerText =
//   "sdf老地方就是为了封建势力开发机索拉卡代发进啦手打会计法拉萨会计法立卡随机发拉卡萨";
